:root {
  --vp-home-hero-name-color: var(--vp-c-brand);
  --vp-home-hero-text-color: var(--vp-c-text-1);
  --vp-home-hero-tagline-color: var(--vp-c-text-2);
  --home-bg-overlay: rgba(255, 255, 255, 0.9);
  --home-feature-bg: rgba(255, 255, 255, 0.9);
  --home-border-color: rgba(60, 60, 60, 0.12);
}

.dark {
  --home-bg-overlay: rgba(26, 26, 26, 0.9);
  --home-feature-bg: rgba(26, 26, 26, 0.9);
  --home-border-color: rgba(200, 200, 200, 0.12);
}

.VPHome {
  position: relative;
  z-index: 1;
}

.VPHome .VPHomeHero {
  background: transparent;
  position: relative;
  z-index: 2;
}

.VPHome .VPHomeHero .image {
  background: transparent;
  margin-top: 2rem;
}

.VPHome .VPHomeHero .image img {
  max-width: 300px;
  height: auto;
  margin: 0 auto;
}

.VPHome .VPFeatures {
  background: var(--home-feature-bg);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem auto;
  max-width: 1200px;
  position: relative;
  z-index: 2;
  border: 1px solid var(--home-border-color);
}

.VPHome .VPFeatures .VPFeature {
  background: transparent;
}

.main-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  /* background: var(--home-bg-overlay); */
  /* backdrop-filter: blur(10px); */
  /* border-radius: 12px; */
  /* border: 1px solid var(--home-border-color); */
}

@media (max-width: 768px) {
  .main-content {
    padding: 1rem 0.5rem;
  }
}

@media (max-width: 640px) {
  .main-content {
    padding: 0.75rem 0.25rem;
  }
}

.VPFeatures {
  margin-bottom: 4rem !important;
}

/* Add styles for FeatureSection */
.FeatureSection {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 4rem;
  align-items: start;
}

.FeatureSection :deep(h2) {
  margin-top: 0;
  color: var(--text-primary);
}

.FeatureSection :deep(pre) {
  margin: 1rem 0;
  background: var(--bg-code-block);
  border: 1px solid var(--border-color);
}

.FeatureSection :deep(p) {
  margin: 1rem 0;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .FeatureSection {
    grid-template-columns: 1fr;
  }
}